<template>
  <div class="info-root info-framework-root">
    <div class="info-title">
      <div style="display: flex;width: 300px;">
        引用框架
        <div class="info-title-sub" style="margin-bottom: 3px;">
          <span class="sub-flip-color">{{ mouseoverFw }}</span>
        </div>
      </div>
      <el-tag type="info" style="margin-left:10px;">
        {{ currentMachine.appName }}
      </el-tag>
    </div>
    <div class="info-content">
      <div class="fw-icon-container">
        <div class="fw-icon" v-for="fw in currentMachine.frameworks" @mouseover="mouseoverHandler(fw)">
          <svg class="fw-icon" v-if="fw === 'SPRINGBOOT'">
            <use xlink:href="#gc-spring" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'MYSQL'">
            <use xlink:href="#gc-mysql-color" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'REDIS'">
            <use xlink:href="#gc-redis_huaban" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'DUBBO'">
            <use xlink:href="#gc-dubbo" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'ZOOKEEPER'">
            <use xlink:href="#gc-zookeeper" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'ROCKET_MQ'">
            <use xlink:href="#gc-rocketmq" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'APOLLO'">
            <use xlink:href="#gc-icon_service_apollo" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'XXL_JOB'">
            <use xlink:href="#gc-job" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'ELASTIC_SEARCH'">
            <use xlink:href="#gc-Elasticsearch" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'SENTRY'">
            <use xlink:href="#gc-sentry" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'SENTINEL'">
            <use xlink:href="#gc-sentinel" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'TRACE'">
            <use xlink:href="#gc-icon-lianlu" />
          </svg>
          <svg class="fw-icon" v-if="fw === 'AUTH'">
            <use xlink:href="#gc-quanxianguanli" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";

// -------------------- inject 
const currentMachine: any = inject('currentMachine')

// ---------------- props

const mouseoverFw = ref<string>('');

const frameworksDemo = ref<any>([
  "SPRINGBOOT", "MYSQL", "REDIS", "DUBBO",
  "ZOOKEEPER", "ROCKET_MQ", "APOLLO", "XXL_JOB",
  "ELASTIC_SEARCH", "SENTRY", "SENTINEL", "TRACE",
  "AUTH"
])

const mouseoverHandler = (fw: any) => {
  mouseoverFw.value = fw;
}

</script>

<style scoped lang="scss">
.info-framework-root {
  @include box(100%, 140px);
  min-height: 140px;

  .mouseover-fw {
    @include font(13px, 500);
    color: var(--el-color-primary-flip);
  }

  .fw-icon-container {
    @include flex(row, flex-start, flex-start);
    flex-wrap: wrap;

    .fw-icon {
      @include flex(row, center, center);
      padding: 3px 1px;

      & svg {
        @include box(33px, 33px);
      }
    }
  }
}

.fw-icon-tooltip {
  z-index: 1111111111;
}
</style>